<template>
	<div id="content">
		<!-- <div class="upload">
			<input type="file" id="file" multiple @change="upload" />
		</div>
		<ul class="view">
				<li>
					<img src="../assets/Map.png" />
					<div class="delect" title="123" @click="noDelect">*</div>
				</li>
				<li v-for="(itme,index) in list" :key='index'>
					<img :src="{item}" />

					<div class="delect" @click="delect(index)"></div>
				</li>
		</ul> -->
		<input v-if="VDO" class="file" name="file" type="file" accept="image/*" @change="updateFace" id="inputImg" />
			<div  class="posttion" >
				<img  src="../../outsource/img/Map.png" alt="" id="imgwh" :style="{ transform:'rotate'+'('+Z+'deg)', transformOrigin:UPX+'px'+' '+ UPY+'px' , top:indexY+'px',left:indexX+'px' }">
				<i  id="VODId" class="el-icon-video-camera" :style="{left:OneCCAX-30+'px',top:OneCCAY-18+'px',transform:'rotate'+'('+ 0+'deg)'}"></i>
			</div>
		    
		<!-- <img src="../assets/Map.png" /> -->
	</div>
</template>

<script>
    export default {
        data() {
            return {
                // list:[],
                img: '',
                CineCameraActorpath: '',
                X: '',
                Y: '',
                Z: '',
                VDO: false,
                GetImgWHrun: false,
                imgW: '',
                imgH: '',
                OneCCAX: '',
                OneCCAY: '',
                indexX: '',
                indexY: '',
                UPX: '',
                UPY: ''


            }
        },
        mounted() {
            this.GetObjCCAPath()
            this.GetCineCameraActor(1)
            this.GetImgWH()
            this.SetTime = setInterval(this.start, 300)
        },
        destroyed() {
            window.clearInterval(this.SetTime)
        },

        methods: {
            start() {
                console.log("正在更新...")
                this.GetCineCameraActor(1)
                let Map = document.getElementById('imgwh').width
                    // console.log(this.X,this.Y)
            },

            updateFace(e) {
                console.log(1)
                const file = e.target.files[0] || e.dataTransfer.files[0]
                console.log(e.currentTarget, e.target.File)
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => {
                    this.img = reader.result
                    this.VDO = true
                    this.GetImgWHrun = true


                }
            },

            GetObjCCAPath() {
                console.log(2)
                let Text = this.$store.state.objectPath.ReturnValue;
                for (let i in Text) {

                    let MatchCCA = Text[i].match('CineCameraActor')
                    if (MatchCCA != null) {
                        this.CineCameraActorpath = MatchCCA.input
                    }

                }
            },

            GetImgWH() {
                console.log(3)
                this.GetImgWHrun = true
                this.imgW = document.getElementById('imgwh').width / 2
                this.imgH = document.getElementById('imgwh').height / 2
                    // console.log(this.imgH,this.imgW)
            },

            GetCineCameraActor(two) {
                //  console.log(4)
                let json, age;
                if (two == 1) {
                    json = "RelativeLocation"

                } else {
                    json = two

                }


                if (json != '' && this.CineCameraActorpath != '') {
                    this.axios.put('/remote/object/property', {
                        "objectPath": this.CineCameraActorpath + ".SceneComponent",
                        "PropertyName": json,
                        "access": "READ_ACCESS"
                    }, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(
                        (res) => {
                            if (json == "RelativeLocation") {
                                if (this.GetImgWHrun) {
                                    this.GetImgWH()
                                    this.OneCCAY = res.data.RelativeLocation.Y / 2 + this.imgH,
                                        this.OneCCAX = res.data.RelativeLocation.X / 2 + this.imgW
                                    this.GetImgWHrun = false
                                        //console.log(this.imgH,'222222222222222')
                                }

                                // this.SourceY=res.data.RelativeLocation.Y


                                this.Y = res.data.RelativeLocation.Y / 2 + this.imgH,
                                    this.X = res.data.RelativeLocation.X / 2. + this.imgW
                                    // this.indexw=this.OneCCAX-this.X
                                    // this.indexh=this.OneCCAY-this.Y

                                this.GetCineCameraActor('RelativeRotation')
                                this.TranslationHow()
                            } else {

                                this.Z = res.data.RelativeRotation.Yaw
                                    // console.log(this.X,this.Y,this.Z)

                            }


                        },
                        (err) => {
                            // console.log(22222)
                        }
                    )

                }


            },

            TranslationHow() {
                let storageX, storageY;

                this.indexX = this.OneCCAX - this.X
                this.indexY = this.OneCCAY - this.Y
                this.UPX = this.OneCCAX - this.indexX
                this.UPY = this.OneCCAY - this.indexY
                    // console.log(this.OneCCAX,'1',this.OneCCAY,'2',this.X,'3',this.Y)
                console.log(this.UPX, this.UPY, storageX, storageY)


                // if(this.Z != 0){


                //  storageX=this.OneCCAX-this.X

                //  storageY=this.OneCCAY-this.Y
                //  this.UPX=storageX
                //  this.UPY=storageY
                //  console.log(this.UPX,this.UPY)

                // }else if(this.Z == 0){
                //  if(storageX == undefined ){
                //   // storageX=0
                //   storageX=parseInt(0)
                //  }
                //  if(storageY == undefined ){
                //  storageY=parseInt(0)
                //  }

                //  this.UPX=parseInt(this.X)+storageX
                //  this.UPY=parseInt(this.Y)+storageY
                //  // this.UPX=this.OneCCAX+storageX
                //  // this.UPY=this.OneCCAY+storageY
                //  console.log(this.UPX,this.UPY)
                // }
            }
        }
    }
</script>

<style scoped>
    .el-icon-video-camera {
        color: red;
        position: absolute;
        font-size: 30px;
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    #content {
        z-index: 999;
        width: 100%;
        height: 100%;
        background-color: #333A46;
    }
    
    .posttion {
        width: 400px;
        height: 400px;
        position: relative;
    }
    
    .posttion>i {
        position: absolute;
    }
    
    #inputImg {
        width: 100%;
        height: 100%;
    }
    
    #imgwh {
        z-index: 0;
        width: 1000px;
        height: 1000px;
        position: absolute;
    }
</style>